<template>
  <div class="wrap pd20">
    <el-form label-position="top" ref="form" :model="form" :rules="rules" class="form session-invitation-form">
      <el-form-item>
        <span class="title">{{$t('configLazyLoad.webchatGlobalSet.labelTips1')}}</span>
        <el-switch
          v-model="form.illegalSwitch"
          :active-text="$t('configLazyLoad.public.open')"
          :inactive-text="$t('configLazyLoad.public.close')">
        </el-switch>
      </el-form-item>
      <p class="help-tips">{{$t('configLazyLoad.webchatGlobalSet.labelTips2')}}</p>
      <el-form-item>
        <el-input type="textarea"  :maxlength="3000" :rows="4" v-model="form.illegalWords"></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <span class="title">在线自定义状态</span>
        <el-switch
          v-model="form.imStatusCustom"
          :active-text="$t('configLazyLoad.public.open')"
          :inactive-text="$t('configLazyLoad.public.close')">
        </el-switch>
      </el-form-item>
      <el-form-item class="imStatusItem">
        <el-input class="imStatusIpt"  :maxlength="8" size="mini" :placeholder="$t('public.pleaseEnter')" v-model.trim="imStatusValue"></el-input>
        <el-button type="primary" size="mini" class="imStatusBtn" @click="addImStatusFun">{{$t('public.confirm')}}</el-button>
        <div>
          <span v-for="(item, index) in form.imStatusCustomList" :key="index" class="imStatusSp">{{item}}<span class="imStatusClose" @click="delImStatus(index)">x</span></span>
        </div>
      </el-form-item> -->
      <el-form-item :label="$t('config.channel.autoCloseSession')" class="padding-top">
        <el-radio-group v-model.trim="form.autoCloseSession" @change="autoCloseChange">
          <el-radio  label="1">{{$t('public.yes')}}</el-radio>
          <el-radio  label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
        <p class="help-tips radio-tips font12 margni-top">{{$t('config.channel.autoCloseSessionMessage')}}</p>
      </el-form-item>
      <div v-if="form.autoCloseSession === '1'">
        <el-form-item :label="$t('config.channel.autoCloseSessionTime')" class="padding-top" prop="autoCloseSessionTime">
          <el-input v-model.trim="form.autoCloseSessionTime" size="mini">
            <template slot="append">{{$t('config.channel.autoCloseSessionTimeMessage')}}</template>
          </el-input>
          <p class="help-tips">{{$t('config.channel.autoCloseSessionTimeDefault')}}</p>
        </el-form-item>
        <el-form-item :label="$t('config.channel.autoCloseSessionType')" class="padding-top">
          <el-cascader
            class="width-full"
            :clearable="true"
            popper-class="webchat-finish"
            :placeholder="$t('webchat.chooseEndSessionType')"
            :options="autoCloseOptions"
            filterable
            @change="autoChangeFun"
            v-model="activeAutoClose">
          </el-cascader>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.labelTips3')" class="padding-top">
          <el-input size="mini" v-model="form.autoCloseSessionMsg" type="textarea" :placeholder="$t('configLazyLoad.webchatGlobalSet.labelTips4')"></el-input>
        </el-form-item>
      </div>
      <el-form-item :label="$t('config.channel.fastOff')" class="padding-top">
        <el-cascader
          class="width-full"
          size="mini"
          popper-class="webchat-finish"
          :clearable="true"
          :placeholder="$t('webchat.chooseEndSessionType')"
          :options="autoCloseOptions"
          filterable
          @change="fastOffCloseFun"
          v-model="activeFastOff">
        </el-cascader>
      </el-form-item>
      <el-form-item :label="$t('config.channel.sessionInvitation')" class="padding-top session-invitation-formitem">
        <el-radio-group v-model.trim="form.sessionInvitation">
          <el-radio  label="1">{{$t('public.yes')}}</el-radio>
          <el-radio  label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
        <p class="help-tips radio-tips font12 margni-top">{{$t('config.channel.sessionInvitationMessage')}}</p>
      </el-form-item>
      <el-form-item :label="$t('config.channel.tipsTime')" class="padding-top" prop="tipsTime">
        <el-input v-model.trim="form.tipsTime" size="mini">
          <template slot="append">{{$t('public.seconds')}}</template>
        </el-input>
        <p class="help-tips font12">{{$t('config.channel.tipsTimeMessage')}}</p>
        <el-input size="mini" v-model="form.tipsContent" type="textarea" :placeholder="$t('config.channel.tipsContent')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.label1')" class="padding-top" prop="iframeUrl">
        <el-input size="mini" v-model.trim="form.iframeUrl" :placeholder="''"></el-input>
        <p class="help-tips font12">{{$t('configLazyLoad.webchatGlobalSet.labelTips5')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.label2')" class="padding-top" prop="iframeWidth">
        <el-input size="mini" v-model.trim="form.iframeWidth" :placeholder="''">
          <template slot="append">px</template>
        </el-input>
        <p class="help-tips font12">{{$t('configLazyLoad.webchatGlobalSet.labelTips6')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.label3')" class="padding-top" prop="iframeHeight">
        <el-input size="mini" v-model.trim="form.iframeHeight" :placeholder="''" :maxlength="4">
          <template slot="append">px</template>
        </el-input>
        <p class="help-tips font12">{{$t('configLazyLoad.webchatGlobalSet.labelTips7')}}</p>
      </el-form-item>
      <!-- <el-form-item class="padding-top" :label="$t('config.channel.forcedTransferSession')">
        <el-radio-group v-model.trim="form.forcedTransferSession">
          <el-radio  label="1">{{$t('public.yes')}}</el-radio>
          <el-radio  label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
        <p class="help-tips font12">{{$t('configLazyLoad.webchatGlobalSet.labelTips8')}}</p>
      </el-form-item>
      <el-form-item class="padding-top" :label="$t('config.channel.forcedTransferGroup')">
        <el-radio-group v-model.trim="form.forcedTransferGroup">
          <el-radio  label="1">{{$t('public.yes')}}</el-radio>
          <el-radio  label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
        <p class="help-tips font12">{{$t('configLazyLoad.webchatGlobalSet.labelTips9')}}</p>
      </el-form-item> -->
      <el-form-item class="padding-top" :label="$t('configLazyLoad.webchatGlobalSet.labelTips10')">
        <el-radio-group v-model.trim="form.quickReply">
          <el-radio  label="listView">{{$t('configLazyLoad.webchatGlobalSet.listView')}}</el-radio>
          <el-radio  label="selectView">{{$t('configLazyLoad.webchatGlobalSet.selectView')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="padding-top">
         <span class="title">{{$t('configLazyLoad.webchatGlobalSet.guestReadeMessageStatus')}}</span>
         <el-switch
          v-model="form.isUserRead"
          :active-text="$t('configLazyLoad.public.open')"
          :inactive-text="$t('configLazyLoad.public.close')">
        </el-switch>
        <p class="help-tips font12">{{$t('configLazyLoad.webchatGlobalSet.guestReadeMessageTip')}}</p>
      </el-form-item>
      <el-form-item class="padding-top" :label="$t('configLazyLoad.webchatGlobalSet.InvitationAgentSettings')">
        <el-radio-group v-model.trim="form.inviteGroupSessionAll">
          <el-radio  label="false">{{$t('configLazyLoad.webchatGlobalSet.CurrentSkillGroup')}}</el-radio>
          <el-radio  label="true">{{$t('configLazyLoad.webchatGlobalSet.AllSkillGroup')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="padding-top">
        <el-button type="primary" @click="submitForm" class="fr primary_btn">{{$t('config.channel.saveSettings')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {checkform} from '@/utils/validate'
  import {updateOptions, initFinishName} from '@/utils/m7Utils'
  export default {
    name: 'forbiddenChatCue',
    data () {
//      let self = this
      let validateNum = (rule, value, callback) => {
        let message = checkform(value, 'Number3')
        if (message) {
          callback(new Error(this.$t(message)))
        } else {
          callback()
        }
      }
      let validateWidth = (rule, value, callback) => {
        if (value !== '' && value > 280) {
          callback(new Error(this.$t('configLazyLoad.webchatGlobalSet.label4')))
        } else {
          callback()
        }
      }
      let validateUrl = (rule, value, callback) => {
        let message = checkform(value, 'Url')
        if (message) {
          callback(new Error(this.$t(message)))
        } else {
          callback()
        }
      }
      return {
        autoCloseOptions: [],
        finishOptions: {},
        endSessionOptions: [],
        closeOptions: [],
        activeFastOff: [],
        activeAutoClose: [],
        // imStatusValue: '',
        form: {
          illegalSwitch: false, // 违禁词开关
          isUserRead: false,
          illegalWords: '', // 违禁词
          autoCloseSession: '0', // 开启自动结束会话
          autoCloseSessionTime: '10',
          // imStatusCustom: false,
          // imStatusCustomList: [],
          autoCloseSessionType: '',
          autoCloseSessionMsg: '',
          autoCloseSessionName: '',
          forcedTransferSession: '0',
          forcedTransferGroup: '0',
          quickReply: 'listView',
          fastOff: '',
          fastOffName: '',
          sessionInvitation: '0',
          tipsTime: '0',
          tipsContent: '',
          iframeUrl: '',
          iframeWidth: '',
          iframeHeight: '',
          inviteGroupSessionAll: false // 邀请座席设置 是否可选择全部技能组
        },
        rules: {
          autoCloseSessionTime: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validateNum, trigger: 'blur'}
          ],
          tipsTime: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validateNum, trigger: 'blur'}
          ],
          iframeWidth: [
            {validator: validateNum, trigger: 'blur'},
            {validator: validateWidth, trigger: 'blur'}
          ],
          iframeHeight: [
            {validator: validateNum, trigger: 'blur'}
          ],
          iframeUrl: [
            {validator: validateUrl, trigger: 'blur'}
          ]
        },
        submitObj: {}
      }
    },
    components: {
    },
    computed: {
    },
    methods: {
      // addImStatusFun () {
      //   if (this.form.imStatusCustomList.length > 4) {
      //     this.$message.error('最多只能添加5个自定义状态')
      //     return
      //   }
      //   this.form.imStatusCustomList.push(this.imStatusValue)
      //   this.imStatusValue = ''
      // },
      // delImStatus (index) {
      //   this.form.imStatusCustomList.splice(index, 1)
      // },
      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.autoCloseSession === '1' && !this.form.autoCloseSessionType) {
              this.$message.error(this.$t('configLazyLoad.webchatGlobalSet.confirmTips1'))
              return
            }
            for (let i in this.form) {
              this.submitObj[i] = this.form[i]
            }
            console.log(this.submitObj)
            this.$store.dispatch('saveGlobalSet', this.submitObj).then((rep) => {
              if (rep.success) {
                this.$message.success(this.$t('config.channel.configSuccess'))
              } else {
                this.$message.error(this.$t('qualityCheck.saveFali'))
              }
            })
          }
        })
      },
      fastOffCloseFun (data) {
        if (data && data.length > 0) {
          let option = this.activeFastOff[this.activeFastOff.length - 1]
          if (option || option !== '') {
            let actName = option.split('__')[1]
            let finishKey = option.split('__')[0]
            this.form.fastOffName = actName
            this.form.fastOff = finishKey
          }
        } else {
          this.form.fastOffName = ''
          this.form.fastOff = ''
        }

      },
      autoChangeFun (data) {
        if (data && data.length > 0) {
          let option = this.activeAutoClose[this.activeAutoClose.length - 1]
          if (option || option !== '') {
            let actName = option.split('__')[1]
            let finishKey = option.split('__')[0]
            this.form.autoCloseSessionName = actName
            this.form.autoCloseSessionType = finishKey
          }
        } else {
          this.form.autoCloseSessionName = ''
          this.form.autoCloseSessionType = ''
        }
      },
      autoCloseChange (value) {
        if (value === '1') {
          if (this.autoCloseOptions.length === 0) {
            this.$message.error(this.$t('configLazyLoad.webchatGlobalSet.confirmTips2'))
            this.form.autoCloseSession = '0'
          }
        }
      },
      generateCloseSession (res) {
        let _dics = []
        for (let i = 0; i < res.length; i++) {
          if (res[i].type === 'webchat') {
            _dics = res[i].options || []
            this.closeOptions = _dics
            break
          }
        }
        if (_dics.length === 0) {
          return
        }
        updateOptions(_dics, {Arr: this.endSessionOptions})
        this.autoCloseOptions = this.endSessionOptions
      },
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'channelDic'}).then((res) => {
        this.generateCloseSession(res)
        this.$store.dispatch('getGlobalSetById', {}).then((resp) => {
          if (resp.row) {
            this.submitObj = resp.row
            for (let i in this.form) {
              this.form[i] = this.submitObj[i]
            }
            this.finishOptions = initFinishName(this.closeOptions, {})
            this.activeFastOff = [this.finishOptions[resp.row.fastOff]] || ''
            this.activeAutoClose = [this.finishOptions[resp.row.autoCloseSessionType]] || ''
            this.form.autoCloseSession = this.form.autoCloseSession ? this.form.autoCloseSession : '0'
            this.form.autoCloseSessionTime = this.form.autoCloseSessionTime ? this.form.autoCloseSessionTime : '10'
            this.form.sessionInvitation = this.form.sessionInvitation ? this.form.sessionInvitation : '0'
            this.form.forcedTransferGroup = this.form.forcedTransferGroup ? this.form.forcedTransferGroup : '0'
            this.form.forcedTransferSession = this.form.forcedTransferSession ? this.form.forcedTransferSession : '0'
            this.form.quickReply = this.form.quickReply ? this.form.quickReply : 'listView'
            this.form.inviteGroupSessionAll = this.form.inviteGroupSessionAll && this.form.inviteGroupSessionAll === 'true'? 'true' : 'false';
            // this.form.imStatusCustomList = this.form.imStatusCustomList || []
            // this.form.imStatusCustom = this.form.imStatusCustom || false
//            this.form.initiatingSession = this.form.initiatingSession ? this.form.initiatingSession : false // 主动会话开关设置
          }
        })
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wrap
    padding 20px 16px
  .help-tips
    color $cf-gray4
  .padding-top
    padding-top 15px
  .form
    width 500px
  .width-full
    width 100%
  .radio-tips
    margin-top -10px
    display block
  .margni-top
    margin-top -4px
  .title
    margin-right 30px
    font-size 12px
  .notice
    font-size 12px
    color #595959
  .imStatusIpt
    width 420px
    margin-right 10px
  .imStatusBtn
    margin-top 7px 0px 0px 10px
  .imStatusSp
    padding 5px 10px
    background-color #E6F1FF
    border-radius 4px
    font-size 12px
    margin-right 8px
    .imStatusClose
      margin-left 10px
      font-size 14px
      color #459AE9
      cursor pointer
</style>
<style lang="stylus">
  .wrap
    .form
      .el-switch__label>span
        font-size 12px
      .imStatusItem
        width 750px  
</style>
